<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,
   				 width=device-width,initial-scale=1.0" />
		<title>模块管理</title>
		<link rel="shortcut icon" href="../../image/oss/iot/favicon2.ico" type="image/x-icon">
		
		<link rel="stylesheet" href="lib/element-ui/index.css">
		<script src="lib/element-ui/vue.min.js"></script>
		<script src="lib/element-ui/index.js"></script>
		<script src="../common/util.js"></script>
		
		<script type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="../../lib/webUploader/webuploader.min.js"></script>
		<style type="text/css">
			.webuploader-element-invisible{
				display: none;
			}
			.deleteUploadImg {
			    position: absolute;
			    display: none;
			    right: 5px;
			    top: 5px;
			    height: 10px;
			    width: 10px;
			    cursor: pointer;
			}
			.img-container{
				display: inline-block;position:relative;
			}
			.img-container:HOVER img {
				display: inline;
			}
			body,html{
				background: #fff ;
			}
		</style>
	</head>
	<body>
		<div id="app" >
			<el-row style="padding:20px;">
			  <el-col :span="12" style="padding:20px;border:1px solid #d9d9d9;height:600px;overflow:auto;" >
		  		<el-collapse v-model="activeNameImgKun" accordion  >
				 	 <el-collapse-item v-for="(item,index) in visualPartList"  :title="item.name" :name="index">
				 	 	<div class="img-container" v-for="(sitem,index) in imgObjList"  v-if="item.code ==sitem.moudle_type ">
							<img  style="width: 60px;height:60px;margin-right:5px;" :src="sitem.dis_img" />
							<img :id="sitem.id" style="width: 10px;height: 10px;" src="./image/delete.png" class="deleteUploadImg" >				 	 	
				 	 	</div>
								
				 	 </el-collapse-item>
				</el-collapse>
			  </el-col>
			  <el-col :span="11" style="padding: 20px; ">
			  	<el-select v-model="code" placeholder="请选择">
				    <el-option
				      v-for="item in visualPartList"
				      :key="item.code"
				      :label="item.name"
				      :value="item.code">
				    </el-option>
				 </el-select>
			  	
			  	<div class="uploadBtns" style="margin-top: 20px;">
					<div class="upload_img mr10" id="upload_img"  >
			        	<button tag="" class="el-button el-button--primary" >上传图片</button>
					</div> 
				</div> 
			  </el-col>
			</el-row>
			
		</div>
	</body>
    <script type="text/javascript">
		var app = new Vue({
    		el:"#app",
			data:function(){
				return {
					visualPartList: [] ,       // 虚拟组件
					imgObjList: [] ,            // 组件图片列表
					activeNameImgKun: [0] ,    // 图库系统
					code: '' ,				   // code值
					uploadImgs:[],
					initUpload:'',
					uploadImgCount:0,
				};
			},
			methods:{
				initVisualPart(){
					// 获取组件类型
					var that = this;
	                commonAjax('GET', baseurl+'/service/dictionary/130' , "" ,function (res) {
						if(isOK(res)){
                           that.visualPartList = res.data ;
                        } 
                    }) ;
				},
				handleChange(){
					var that = this;
					commonAjax('POST',baseurl+'/service/page/moudle/visual?paged=1&pageSize=1999' , {} ,
						function (e) {
                    	 if(isOK(e)){
                            that.imgObjList = e.data.data ;
                         }
                    }) ;
				},
			},created(){
				
			},mounted() {
				this.initVisualPart();
				this.handleChange();
				initImgUpload("upload_img");
			}
    	})
		
		function saveImg(url){
			if(util.isEmpty(app.code)){
				app.$message.error("请选择上传目录");
				return ;
			}
			var data = {
				name:'上传图片',
				dis_img:url,
				moudle_type: app.code
			}
			commonAjax("POST",baseurl+"/service/moudle/visual", data,function(e){
				if(e.status == 2){
					app.imgObjList.push(e.data);
					app.$message({
				          message: '成功',
				          type:'success'
				    });
				}else{
					app.$message.error(e.statusMsg);
				}
			});
		}
		
		$(document).delegate(".deleteUploadImg","click",function(event){
			var that = $(this) ;
			commonAjax('DELETE', baseurl+'/service/moudle/visual.json?id='+ $(this).attr("id")  , '',function(res){
				if(res.status == 2){
					// 删除成功
					that.parent().remove();
				}
			} );
		});
		
		function initImgUpload(id){
			//上传模板 
			UploadInit( baseurl + '/service/upload.json' , {category:"img"} ,function(file,data){
				if(data.status==2){
					var url = "/res"+data.data;
					saveImg(url);
				}
			}, id ,id,"110px", "35px") ;
		}
		
		/**
		 * @Func 文件上傳功能，目前只支持單個
		 * @param imgUrl domain
		 * @param user_id 用戶id
		 * @param func 成功之後的回調
		 * @Param id 文件选择id
		 */
		function UploadInit(imgFindUrl, userInfo ,func,id,domId,thumbnailWidth, thumbnailHeight,accept,acceptconfig){
		    var $ = jQuery,
		        state = 'pending',
		        uploader;
		    // 增加类型修改，可以传入类型
		    if(accept == undefined){
		    	acceptconfig =  "" ;
		    }else{
		    	acceptconfig = getVal( acceptconfig, {   // 默认值兼容之前
			          title: 'Images',
			          extensions: 'gif,jpg,jpeg,bmp,png,pdf',
			          mimeTypes: 'image/jpg,image/jpeg,image/png'
			        });
		    }
		    
		    uploader = WebUploader.create({
		    	// 自动上传
		    	auto: true,
		        // 不压缩image
		        resize: false,
		        //不压缩图片
		        compress:false,
		        // swf文件路径
		        swf: baseurl + '/lib/webUploader/Uploader.swf',
		        // 文件接收服务端。
		        server: imgFindUrl,
		        // 选择文件的按钮。可选。
		        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		        pick: '#'+id ,
		        duplicate: true ,
		        fileSingleSizeLimit: 5*1024*1024,
		      // 只允许选择文件，可选。
		        accept:acceptconfig
		    });
		    
		    uploader.on("error",function (type){
		        if (type=="Q_TYPE_DENIED"){
		        	if(typeof(layer)!="undefined"){
		        		showTip("请上传正确的文件格式");
		        	}else{
		        		alert("请上传正确的文件格式");        		
		        	}
		        }else if(type=="F_EXCEED_SIZE"){
		        	if(typeof(layer)!="undefined"){
		        		showTip("文件大小不能超过5M");      
		        	}else{
		        		alert("文件大小不能超过5M");        		
		        	}
		        }
		    });
		    // 当有文件添加进来的时候
		    uploader.on('fileQueued', function(file) {
		    	$("#"+domId).css("width","0%");
		    	$("#"+domId).attr("ids","");
		    	$("#"+domId).css("display","inherit");
		    	uploader.options.formData= gdv(userInfo , {}) ;
		    	uploader.makeThumb( file, function( error, src ) {
		           $("#back_"+domId).css("background","url("+src+")");
		           
		        }, thumbnailWidth, thumbnailHeight );
		    });
		    // 文件上传过程中创建进度条实时显示。
		    uploader.on('uploadProgress', function(file, percentage) {
		    	$("#all_"+domId).text(parseInt(percentage*100)+"%");
		    	$("#"+domId).css("width",parseInt(100-percentage*100)+"%");
		    });
		    uploader.on('uploadSuccess', func);
		    uploader.on('uploadError', function(file) {
		    	console.log("文件上传出错"); 
		    });
		    uploader.on('uploadComplete', function(file) {
		    });
		    uploader.on('all', function(type) {
		    });
		};
		
		function commonAjax(method,url, data,sucessCallBack, errorCallBack) {
			var config = {
				type : method ,
				url : url,
				contentType : "application/json",
				dataType : "json",
				async : true,
				success : function(data){
					if(data.status == 20000){
						return;
					}else{
						sucessCallBack(data);
					}
				},
				error : errorCallBack
			};
			if(typeof(ucode) != "undefined"){
				config.headers={  'USER-KEY' :ucode  };
			}
			if(method.toUpperCase() != 'GET' &&  method.toUpperCase() != 'DELETE'  ){
				config.data = JSON.stringify(data);
			}
			$.ajax(config)
		};
		
		var isOk= isOK ;
		function isOK(e){
			if(e.status == 2 ){
				return true ;
			}else{
				return false ;
			}
		}
    </script>
</html>
